<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';

let router=useRouter()

interface BookDetails{
  id:number,
  name:string,
  type:string
}

let route=useRoute()
const detailsData = ref<BookDetails>({
  id: 0,
  name: '',
  type: ''
});

onMounted(async()=>{

  let res = await axios.get("http://localhost:8080/api/books/"+route.query.id)
  detailsData.value=res.data
})

// function update() {
//   axios.get("http://localhost:8080/api/updateBook", {
//     params: formData.value
//   }).then(() => {
//     router.push({
//       path: "/"
//     });
//   }).catch((error)=>{
//     console.log("error",error)
//   });
// }

async function update() {
  await axios.put("http://localhost:8080/api/updateBook", detailsData.value)
      .then(() => {
        //打印=================================
        console.log("=========")
        router.push("/"); // 跳转到根路径
      })
      .catch((error) => {
        console.error("更新失败:", error);
      });
}

/*
         .then(()=>{
          router.go(0)
        })
 */
</script>



<template>
  <h1>update11</h1>
  <form  @submit.prevent="update">
    <input type="hidden" id="id" name="id" v-model="detailsData.id">
    name: <input type="text" id="name" name="name" v-model="detailsData.name"><br>
    type: <input type="text" id="type" name="type" v-model="detailsData.type"><br>
    <button type="submit">修改</button>
  </form>
</template>



<style scoped>

</style>